class Enlarge {                 //定义一个放大镜类
    constructor(ele,imgArr){        //传入两个参数，一个为容器盒子元素，一个为需要放大的图片数组
        this.ele = ele ;            //容器盒子变为属性
        this.imgArr = imgArr ;      //图片数组成为它的属性
        this.maskEle = this.ele.querySelector(".mask"); //获取容器盒子中遮罩元素，为属性
        this.showEle = this.ele.querySelector(".show"); //获取容器盒子中显示图片元素的盒子，为属性
        this.enlargeEle = this.ele.querySelector(".enlarge");   //获取容器盒子中放大图片元素，为属性
        this.imgEle = this.ele.querySelector(".show img");      //获取显示图片呢元素
        this.navEle = this.ele.querySelector(".nav");       //获取下面选项卡元素盒子
        this.w = this.ele.offsetLeft ;          //获取容器盒子距离浏览器左边框距离
        this.h = this.ele.offsetTop ;           //获取容器和种子距离浏览器上边框距离
        console.log(this.w,this.h);
        this.resetEle();                        //执行渲染方法
        this.tab();                             //给下面图片选项卡添加切换事件
        this.operate();                         //给显示show元素绑定事件
       
    }
    resetEle(){                                     //在类的原型上定义一个重置元素的方法
        this.imgEle.src = `./${this.imgArr[0]}` ;           //图片元素初始图片为第一张图片
        this.enlargeEle.style.backgroundImage = `url(${this.imgArr[0]})` ;    //放大元素第一张背景图为图片第一张为数组第一个图片
        this.navEle.innerHTML = '' ;                            //初始化下面选项卡图片
        this.imgArr.forEach((item,key)=>{           //遍历图片数组
            let liEle = document.createElement("li");       //创建一个li元素
            if( key == 0 ){                         //如果创建的li元素是第一个元素，表示初始化的第一个，给这个li添加一个active类名
                liEle.className = "active" ;
            }
            liEle.setAttribute("index",key);        //给每个li元素绑定一个index的自定义属性，属性值为图片数组的键值key，表示该li里面放的是第几张图片
            liEle.innerHTML = `<img src="${item}" alt="">` ;    //存放对应的图片
            this.navEle.appendChild(liEle);         //将li元素添加到下面选项卡的大盒子中
        });
    }   
    tab(){                                              //在类的原型上定义一个tab方法，切换下面图片的时候显示图片和放大背景图片都切换
        const _that = this ; 
        let liEles = _that.navEle.querySelectorAll("li");       //获取这个存放图片选项卡所有li元素
        liEles.forEach(liEle=>{                             //遍历所有的li元素
            liEle.onmouseover = function (){                //鼠标移动到某一个li元素上时
                let index = this.getAttribute("index");     //获取这个li元素对应的的图片下标
                liEles.forEach(item=>{item.classList.remove("active");});       //移除所有li的active类名
                this.classList.add("active");                       //给当前li添加active类名
                _that.imgEle.src = `${_that.imgArr[index]}` ;       //获取图片数组的图片渲染给img元素
                _that.enlargeEle.style.backgroundImage = `url(${_that.imgArr[index]})` ;    //渲染放大元素的背景图
            }
        });
    }
    operate(){                                          //在原型上定义一个operate方法，给showEle元素添加各种事件
        const _that = this ;                            //声明一个_that常量接收this
        _that.showEle.onmouseenter = function (){       //当鼠标移进show元素中时
            _that.maskEle.style.display = "block" ;     //遮罩显示
            _that.enlargeEle.style.display = "block" ;  //放大镜区域显示
        }
        _that.showEle.onmouseleave = function (){       //鼠标移出show元素中时
            _that.maskEle.style.display = "none" ;      //遮罩隐藏
            _that.enlargeEle.style.display = "none" ;   //放大镜区域隐藏
        }
        _that.showEle.onmousemove = function (event){   //当鼠标在show元素中移动的时候，获取事件event
            let e = event || window.event ;                 //事件兼容
            let maskWidth = _that.maskEle.offsetWidth ;     //获取遮罩元素的宽度
            let maskHeight = _that.maskEle.offsetHeight ;   //获取遮罩元素的高度
            let mouseX = e.clientX ;                        //获取此时鼠标距离浏览器左边框水平距离
            let mouseY = e.clientY ;                        //获取此时鼠标距离浏览器上边框的竖直距离
            
            let x = mouseX - _that.w - maskWidth / 2 ;      //遮罩的左边距离show盒子的左边距离
            let y = mouseY - _that.h - maskHeight / 2 ;     //遮罩的上边距离show盒子的上边距离
           
            if( x < 0 ){                    //左边界判断
                x = 0 ;
            }
            if( x > _that.showEle.offsetWidth - maskWidth ){        //又边界判断
                x = _that.showEle.offsetWidth - maskWidth ;         
            }
            if( y < 0 ){                    //上边界判断
                y = 0 ;
            }
            if( y > _that.showEle.offsetHeight - maskHeight ){      //下边界判断
                y = _that.showEle.offsetHeight - maskHeight ;
            }
            console.log(y);
            let arr = getComputedStyle(_that.enlargeEle,"null")["background-size"].split(" ");      //获取放大区域背景并通过空格切割  切割后的数组为["800px","800px"]
            let xx = parseInt(arr[0]) * x / _that.showEle.offsetWidth ;     //数组的第一个值为放大区域背景图的宽度   计算水平比例 
            let yy = parseInt(arr[1]) * y / _that.showEle.offsetHeight ;    //数组的第二个值为放大区域背景图的高度   计算竖直比例

            _that.enlargeEle.style.backgroundPosition = `-${xx}px -${yy}px` ;       // 按照比例显示放大区域
            _that.maskEle.style.top = y + "px" ;            //渲染遮罩区域的定位属性
            _that.maskEle.style.left = x + "px" ; 
        }
    }
}